<template>
  <div class="container">
    <div v-for="categorize in categorizeList" class="categorize-info">
      <div class="categorize-title">{{ categorize.title }}</div>

      <div class="categorize-content">
        <div
          v-for="item in categorize.data"
          :key="item"
          class="tag"
          @click="onClickKeyword(item)"
        >
          {{ item.text }}
        </div>

        <div
          class="tag"
          @click="toggleState"
          v-show="categorize.type === 'keyword'"
        >
          <van-icon :name="showAllKeyWord ? 'arrow-up' : 'arrow-down'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, toRefs } from "vue";
import { useMinutesStore } from "@/store/modules/minutes/minutes";
import { showToast } from "vant";

const emit = defineEmits(["onClickKeyword"]);
const showAllKeyWord = ref(false);
const minutesStore = useMinutesStore();

const { keywordLabResults, isSalesMeet } = toRefs(minutesStore);

const toggleState = () => {
  showAllKeyWord.value = !showAllKeyWord.value;
};

const onClickKeyword = item => {
  const { type, text } = item;
  const isKeyWord = type === "keyword";
  if (!isKeyWord && item.bt) {
    //TODO: 待实现
    showToast("未实现");
    // minutesStore.setPlayerTimeStamp(item.bt);
  }
  emit("onClickKeyword", text);
};

const keywordLabels = computed(() => {
  let array = showAllKeyWord.value
    ? keywordLabResults.value
    : keywordLabResults.value.slice(0, 3);

  return array.map(v => ({ text: v.value }));
});

const categorizeList = computed(() => {
  let categorizes = [];

  if (isSalesMeet.value) {
    // for (const attitude of attitudeList.value) {
    //   let data = [];
    //   if (attitude.positiveFeedback > 0) {
    //     data.push({
    //       text: `积极反馈(${attitude.positiveFeedback})`,
    //       bt: attitude.positiveBt,
    //     });
    //   }
    //   if (attitude.negativeFeedback > 0) {
    //     data.push({
    //       text: `负面反馈(${attitude.negativeFeedback})`,
    //       bt: attitude.negativeBt,
    //     });
    //   }
    //   if (attitude.positiveFeedback + attitude.negativeFeedback > 0) {
    //     categorizes.push({
    //       title: attitude.name,
    //       type: "report",
    //       data: data,
    //     });
    //   }
    // }
    // const { height, medium, low } = riskListInfo.value;
    // let riskData = [];
    // if (height?.length > 0) {
    //   let bt = height[0].来源.时间戳;
    //   riskData.push({ text: `高风险(${height?.length})`, bt });
    // }
    // if (medium?.length > 0) {
    //   let bt = medium[0].来源.时间戳;
    //   riskData.push({ text: `中风险(${medium?.length})`, bt });
    // }
    // if (low?.length > 0) {
    //   let bt = low[0].来源.时间戳;
    //   riskData.push({ text: `低风险(${low?.length})`, bt });
    // }
    // if (riskData.length > 0) {
    //   categorizes.push({
    //     title: "风险项",
    //     type: "risk",
    //     data: riskData,
    //   });
    // }
    // if (todoList.value.length > 0) {
    //   categorizes.push({
    //     title: "待办",
    //     type: "todo",
    //     data: [{ text: `共${todoList.value.length}项` }],
    //   });
    // }
  }

  categorizes.push({
    title: "关键词",
    type: "keyword",
    data: keywordLabels.value
  });

  return categorizes;
});
</script>

<style lang="less" scoped>
.container {
  background-color: #f9fafc;
  padding: 22px 15px 22px 15px;
  border-radius: 8px;

  .tag {
    color: #595959;
    background-color: #f4f4f4;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    height: 24px;
    margin-right: 8px;
    margin-bottom: 6px;
  }

  .categorize-info {
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: 8px;

    .categorize-title {
      font-weight: 900;
      font-size: 12px;
      color: #262626;
      min-width: 70px;
      margin-top: 6px;
    }

    .categorize-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      padding-top: 2px;
    }
  }
}
</style>
